import Card from './Card'

interface NavCardProps {
  open: boolean
  handleClose?: () => void
}

let hadShow = false

const NavCard: React.FC<NavCardProps> = ({ open, handleClose }) => {
  if (!hadShow && open) {
    hadShow = true
  }
  return (
    <div className={`z-[100] absolute right-[37px]
      bottom-4 md:bottom-1/2 md:translate-y-1/2 black_module
       w-64 backdrop-blur-[100px]
       bg-black/50 shadow-[0_2px_4px_rgba(255,255,255,0.25)]
       rounded-[10px] px-[10px] py-[15px]
       tranisition duration-300
       ${open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none translate-x-8'}
    `}>
      <div className="flex justify-between items-center">
        <h3 className="color_bar font-bold text-xl before:h-[90%] pl-[14px]">索引</h3>
        <i className="cursor-pointer" onClick={handleClose}>
          <svg className=" text-white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M817.472 199.509333a25.557333 25.557333 0 0 0-36.16 0l-86.912 86.890667A561.237333 561.237333 0 0 0 512 256C220.416 256 42.666667 477.653333 42.666667 512c0 23.274667 82.026667 132.501333 225.6 200.533333l-75.797334 75.797334a25.578667 25.578667 0 1 0 36.16 36.16L817.493333 235.669333a25.557333 25.557333 0 0 0 0-36.16zM341.333333 512a170.837333 170.837333 0 0 1 170.666667-170.666667 166.976 166.976 0 0 1 96.554667 30.933334l-30.933334 30.933333A125.013333 125.013333 0 0 0 512 384a128.149333 128.149333 0 0 0-128 128 125.013333 125.013333 0 0 0 19.178667 65.621333l-30.933334 30.933334A166.976 166.976 0 0 1 341.333333 512zM793.536 330.88l-122.026667 122.026667A168.917333 168.917333 0 0 1 682.666667 512a170.837333 170.837333 0 0 1-170.666667 170.666667 168.917333 168.917333 0 0 1-59.093333-11.157334l-78.976 78.954667A560.384 560.384 0 0 0 512 768c291.584 0 469.333333-221.653333 469.333333-256 0-21.162667-67.712-113.408-187.797333-181.12z" fill="#ffffff"></path><path d="M512 640a127.744 127.744 0 0 0 125.461333-153.066667l-150.528 150.528A128.042667 128.042667 0 0 0 512 640z" fill="#ffffff"></path></svg>
        </i>
      </div>
      <div
        className={`max-h-[330px] mt-[25px] relative z-0`}
        style={{
          scrollbarWidth: 'none',
        }}>
        <Card handleClose={handleClose} />
      </div>
    </div>
  )
}

export default NavCard